<template>
  <div class="oo">
    <div class="image">
      <img src="./image/01.png" >
      <img src="./image/02.png" >
    </div>
    <a class="book1" v-for="(item,index) in tarGet" :key="item.id" :href="item.target.url">
      <div class="book">
      <div class="text">
      <p class="p1">{{index+1}}</p>
      <p class="p2">{{item.target.title}}</p>
      </div>
    <img class="img" :src="item.children[0].thumbnail" >
    </div> 
    <p class="p3">{{item.detail_text}}</p>
    </a> 
  </div>
</template>

<script>
import {getHot} from '@/api'
export default {
  name: 'Chart',
  data(){ 
    return{
      tarGet:[]
    }
  },
  mounted(){ 
    this.getDate()
  },
  methods:{ 
    async getDate(){ 
      const result = await getHot() 
      this.tarGet = result.data.data
    }
  }
}
</script>

<style lang='less' scoped>
.oo{
  margin-top: 80px;
  .image{
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    img{
      width: 150px;
      height: 50px;
      border-radius: 50px;
    }
  }
  .book1{
    color: rgba(15, 15, 15, 0.933);
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
    border-bottom: 2px solid rgb(224, 223, 223);;
     .book{
    .text{
      display: flex;
      margin-top: 10px;
      .p1{
        margin-top: 8px;
        padding:0 10px;
        height: 20px;
        color: rgb(146, 143, 143);
        font-weight: bold;
        
      }
      .p2{
        line-height: 30px;
        font-size: 18px;
        font-weight: bold;
        // overflow: hidden;
      }
    }
    display: flex;
    .img{
      margin-top: 10px;
      margin-right: 10px;
      margin-left: 10px;
      width: 80px;
      height: 100px;
    }
  }
  .p3{
    margin-left: 30px;
    font-size: 18px;
    color: rgb(146, 143, 143);
    margin-top: 10px;
  }
  }

 
}
  
</style>
